チャートのプロトタイプのメソッド

チャートごとに、共有チャートタイプに役立つ一連のグローバルプロトタイプメソッドがあります。これらは Chart.js で作成されたすべてのグラフで利用できますが、例として、作成した折れ線グラフを使用してみましょう。

// For example:
var myLineChart = new Chart(ctx, config);

。破壊（）

これを使用して、作成されたチャートインスタンスを破棄します。これにより、Chart.js 内のチャートオブジェクトに保存されている参照と、Chart.js によってアタッチされた関連イベントリスナーがクリーンアップされます。これは、キャンバスが新しいグラフに再利用される前に呼び出す必要があります。

// Destroys a specific chart instance
myLineChart.destroy();

.update(config)

チャートの更新をトリガーします。これは、データオブジェクトの更新後に安全に呼び出すことができます。これにより、すべてのスケールと凡例が更新され、グラフが再レンダリングされます。

// duration is the time for the animation of the redraw in milliseconds
// lazy is a boolean. if true, the animation can be interrupted by other animations
myLineChart.data.datasets[0].data[2] = 50; // Would update the first dataset's value of 'March' to be 50
myLineChart.update(); // Calling update now animates the position of March from 90 to 50.

ノート：データ参照を置き換えます (例:myLineChart.data = {datasets: [...]}起動するだけで動作しますバージョン2.6。それ以前は、次の回避策を使用してデータオブジェクト全体を置き換えることができました。myLineChart.config.data = {datasets: [...]}。

あconfigオブジェクトには、更新プロセス用の追加構成を提供できます。こんなときに便利ですupdateイベントハンドラー内で手動で呼び出され、別のアニメーションが必要です。

次のプロパティがサポートされています。

間隔(数値): 再描画のアニメーションにかかる時間 (ミリ秒)
怠惰(ブール値): true の場合、アニメーションは他のアニメーションによって中断できます。
緩和する(文字列): アニメーションのイージング関数。見るアニメーションイージング可能な値については。

例：

myChart.update({
    duration: 800,
    easing: 'easeOutBounce'
});

見るチャートの更新詳細については。

.reset()

チャートを最初のアニメーション前の状態にリセットします。新しいアニメーションは、次を使用してトリガーできます。update。

myLineChart.reset();

.render(構成)

すべてのチャート要素の再描画をトリガーします。これにより、新しいデータの要素は更新されないことに注意してください。使用157bc547-8211-4ae0-b495-88ac5c59d80bその場合。

見る.update(config)config オブジェクトの詳細については、を参照してください。

// duration is the time for the animation of the redraw in milliseconds
// lazy is a boolean. if true, the animation can be interrupted by other animations
myLineChart.render({
    duration: 800,
    lazy: false,
    easing: 'easeOutBounce'
});

。ストップ（）

これを使用して、現在のアニメーションループを停止します。これにより、現在のアニメーションフレーム中にチャートが一時停止されます。電話.render()再びアニメ化するために。

// Stops the charts animation loop at its current frame
myLineChart.stop();
// => returns 'this' for chainability

.resize()

これを使用して、キャンバス要素のサイズを手動で変更します。これは、キャンバスコンテナーのサイズが変更されるたびに実行されますが、キャンバスノードコンテナー要素のサイズを変更する場合は、このメソッドを手動で呼び出すことができます。

// Resizes & redraws to fill its container element
myLineChart.resize();
// => returns 'this' for chainability

。クリア（）

チャートキャンバスをクリアします。アニメーションフレーム間の内部で広範囲に使用されますが、役に立つかもしれません。

// Will clear the canvas that myLineChart is drawn on
myLineChart.clear();
// => returns 'this' for chainability

.toBase64Image()

これにより、現在の状態のチャートの Base 64 でエンコードされた文字列が返されます。

myLineChart.toBase64Image();
// => returns png data url of the image on the canvas

.generateLegend()

そのグラフの凡例の HTML 文字列を返します。凡例は以下から生成されます。legendCallbackオプションで。

myLineChart.generateLegend();
// => returns HTML string of a legend for this chart

.getElementAtEvent(e)

電話をかけるgetElementAtEvent(event)Chart インスタンスでイベントまたは jQuery イベントの引数を渡すと、イベントの位置にある単一の要素が返されます。範囲内に複数の項目がある場合は、最初の項目のみが返されます。このメソッドから返される値は、単一のパラメーターを持つ配列です。配列は、get*AtEvent方法。

myLineChart.getElementAtEvent(e);
// => returns the first element at the event point.

クリックされた項目を取得するには、getElementAtEventに使える。

お父さん52f14-8064-41d3-a6ad-b386edb18024

.getElementsAtEvent(e)

イベントポイントの下の要素を検索し、同じデータインデックスにあるすべての要素を返します。これは、「ラベル」モードの強調表示のために内部的に使用されます。

電話をかけるgetElementsAtEvent(event)Chart インスタンスでイベントまたは jQuery イベントの引数を渡すと、そのイベントと同じ位置にあるポイント要素が返されます。

canvas.onclick = function(evt) {
    var activePoints = myLineChart.getElementsAtEvent(evt);
    // => activePoints is an array of points on the canvas that are at the same position as the click event.
};

この機能は、DOM ベースのツールチップを実装したり、アプリケーションでカスタム動作をトリガーしたりする場合に便利です。

.getDatasetAtEvent(e)

イベントポイントの下の要素を検索し、そのデータセットからすべての要素を返します。これは、「データセット」モードの強調表示のために内部的に使用されます。

myLineChart.getDatasetAtEvent(e);
// => returns an array of elements

.getDatasetMeta(インデックス)

現在のインデックスに一致するデータセットを検索し、そのメタデータを返します。この返されたデータには、グラフの作成に使用されるすべてのメタデータが含まれています。

のdataメタデータのプロパティには、チャートの種類に応じて、各点、四角形などに関する情報が含まれます。

広範な使用例は、Chart.js テスト。

var meta = myChart.getDatasetMeta(0);
var x = meta.data[0]._model.x;

Chart.js API